---
import { Icon } from "astro-icon/components";
import HeroImage from "~/components/hero-image.astro";
import type { FooterLink } from "~/types";

const links: Array<FooterLink> = [
  {
    url: "https://astro.build/",
    description: "Astro's official website",
    icon: "mdi:home",
  },
  {
    url: "https://github.com/mhyfritz/astro-landing-page",
    description: "View source on GitHub",
    icon: "fa-brands:github-alt",
  },
  {
    url: "https://astro.build/chat",
    description: "Astro on Discord",
    icon: "fa-brands:discord",
  },
  {
    url: "https://twitter.com/astrodotbuild",
    description: "Astro on Twitter",
    icon: "fa-brands:twitter",
  },
];
---

<footer class="relative flex h-64 items-center justify-center">
  <div class="absolute inset-0 overflow-hidden opacity-40">
    <HeroImage />
  </div>
  <ul class="relative grid grid-cols-2 gap-4 sm:grid-cols-4">
    {
      links.map((link) => (
        <li>
          <a
            class="flex size-16 items-center justify-center rounded-full border-2 border-current p-4"
            href={link.url}
          >
            <span class="sr-only">{link.description}</span>
            <Icon class="size-full" name={link.icon} />
          </a>
        </li>
      ))
    }
  </ul>
</footer>
